<script>
export default {
  name: "TalensMap",
  methods: {
    drawChart() {
      const dpr = window.devicePixelRatio;
      const canvas = document.querySelector('#canvas')
      const {width, height} = canvas;
      canvas.width = Math.round(width * dpr);
      canvas.height = Math.round(height * dpr);
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
      const ctx = canvas.getContext('2d')
      ctx.scale(dpr, dpr)

      const deg = Math.PI / 180
      const padding = 50
      //  原点
      const origin = {
        x: padding,
        y: canvas.height - padding
      }
      //  y轴最大值
      const yMax = {
        x: padding,
        y: padding
      }
      //  x轴最大值
      const xMax = {
        x: canvas.width - padding,
        y: origin.y,
      }
      // 坐标箭头长度
      const arrowLength = 8

      //  清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      //  y轴
      ctx.lineWidth = 1
      ctx.strokeStyle = 'black'
      ctx.moveTo(origin.x, origin.y)
      ctx.lineTo(yMax.x, yMax.y)
      ctx.stroke()
      ctx.lineTo(yMax.x - arrowLength * Math.cos(45 * deg), yMax.y + arrowLength * Math.sin(45 * deg))
      ctx.stroke()
      ctx.lineTo(yMax.x, yMax.y)
      ctx.lineTo(yMax.x + arrowLength * Math.cos(45 * deg), yMax.y + arrowLength * Math.sin(45 * deg))
      ctx.stroke()

      //  x轴
      ctx.moveTo(origin.x, origin.y)
      ctx.lineTo(xMax.x, xMax.y)
      ctx.stroke()
      ctx.lineTo(xMax.x - arrowLength * Math.cos(45 * deg), xMax.y - arrowLength * Math.sin(45 * deg))
      ctx.stroke()
      ctx.lineTo(xMax.x, xMax.y)
      ctx.lineTo(xMax.x - arrowLength * Math.cos(45 * deg), xMax.y + arrowLength * Math.sin(45 * deg))
      ctx.stroke()

      //  宫格
      const rows = 3
      const columns = 4
      const chartPadding = 20
      const color = ['#bf444c', '#d88273', '#f6efa6']
      const gap = 5,
          rectWidth = (xMax.x - origin.x - gap * (columns - 1) - chartPadding) / columns,
          rectHeight = (origin.y - yMax.y - gap * (rows - 1) - chartPadding - chartPadding / 2) / rows
      for (let row = 0; row < rows; row++) {
        for (let col = 0; col < columns; col++) {
          let x = (yMax.x + chartPadding / 2) + col * (rectWidth + gap)
          let y = (yMax.y + chartPadding) + row * (rectHeight + gap)
          ctx.fillStyle = color[Math.round(Math.random() * 2)]
          ctx.fillRect(x, y, rectWidth, rectHeight)
        }
      }

      //  绘制文字
      ctx.fillStyle = 'black'
      ctx.font = "normal 400 14px Microsoft YaHei";
      ctx.fillText('校准后绩效', xMax.x / 2, xMax.y + 20)
      ctx.fillText('(高)', xMax.x, xMax.y + 20)
      ctx.fillText('(高)', yMax.x - 30, yMax.y)
      ctx.fillText('(低)', origin.x - 20, origin.y + 20)
      let array = ("校准后潜力").split('')
      array.map((item, index) => {
        ctx.fillText(item, yMax.x - 20, (origin.y - yMax.y) / 2 + 14 * index)
      })
    }
  },
  mounted() {
    this.drawChart()
  }
}
</script>

<template>
  <canvas id="canvas" width="578" height="368"></canvas>
</template>

<style scoped lang="less">
</style>